<template>
  <div>
    <div>
      <img src="@/assets/imgs/hasColorLogo.png" alt="" class="logo" />
      <div class="title">售后服务单</div>
    </div>
    <div class="tab">
      <div class="d-flex align-center ">
        <div class="bg-dark item-title height-61 border-right border-bottom">客户资料</div>
        <div class="width-90">
          <div class="d-flex">
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-30 border-right border-bottom">客户名称</div>
              <div class="width-60 height-30 border-bottom">{{ detailData.customerName }}</div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-30 border-right border-left border-bottom">客户联系人</div>
              <div class="width-60 height-30 border-bottom">{{ detailData.customerContacts }}</div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-30 border-right border-left border-bottom">客户电话</div>
              <div class="width-60 height-30 border-bottom">{{ detailData.customerMobile }}</div>
            </div>
          </div>
          <div class="d-flex">
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-30 border-right border-bottom">产品编号</div>
              <div class="width-60 height-30 border-bottom">{{ detailData.productNumber }}</div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-30 border-right border-left border-bottom">产品安装日期</div>
              <div class="width-60 height-30 border-bottom">{{ detailData.productInstallDate }}</div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-30 border-right border-left border-bottom">客户公司地址</div>
              <div class="width-60 height-30 border-bottom">{{ detailData.customerAddress }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex align-center border-bottom">
        <div class="bg-dark item-title height-61 border-right">售后类型</div>
        <dict-tag class="width-90" :type="'post_service_type'" :value="detailData.dictPostType" />
      </div>
      <div class="d-flex align-center border-bottom bg-dark">
        <div class="item-title">售后人员</div>
        <div class="width-90 border-left">
          <div v-for="(item, index) in detailData.childList" :key="index" class="service-wrap">
            <div class="d-flex service">
              <div class="d-flex width-33">
                <div class="bg-light width-40 height-30 border-right">到达现场时间</div>
                <div class="width-60">{{ item.arriveSceneTime }}</div>
              </div>
              <div class="d-flex width-33">
                <div class="bg-light width-40 height-30 border-right border-left"
                  >离开现场时间</div
                >
                <div class="width-60">{{ item.leaveSceneTime }}</div>
              </div>
              <div class="d-flex width-33">
                <div class="bg-light width-40 height-30 border-right border-left">工日总数</div>
                <div class="width-60">{{ item.workDayTatol }}</div>
              </div>
            </div>
            <div class="d-flex service">
              <div class="d-flex width-33">
                <div class="bg-light width-40 height-30 border-right">服务人员</div>
                <div class="width-60">{{ item.serviceCanstacts }}</div>
              </div>
              <div class="d-flex width-33">
                <div class="bg-light width-40 height-30 border-right border-left">联系电话</div>
                <div class="width-60">{{ item.customerMobile }}</div>
              </div>
              <div class="d-flex width-33">
                <div class="bg-light width-40 height-30 border-right border-left">服务工时</div>
                <div class="width-60">{{ item.serviceWorkTime }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-for="item, index in detailData.dutys" :key="index">
        <div class="d-flex align-center border-bottom">
          <div class="item-title word-wrap bg-dark">保修故障描述{{ index + 1 }}</div>
          <div class="area border-left width-90">{{ item.failureDescription }}</div>
        </div>
        <div class="d-flex align-center border-bottom">
          <div class="item-title word-wrap bg-dark">故障处理情况{{ index + 1 }}</div>
          <div class="width-90 border-left area">{{ item.failureHandling }}</div>
        </div>
        <div class="d-flex align-center border-bottom">
          <div class="item-title word-wrap bg-dark">故障原因分析{{ index + 1 }}</div>
          <div class="width-90 border-left area">{{ item.failureCause }}</div>
        </div>
      </div>
      <div class="d-flex align-center border-bottom">
        <div class="bg-dark item-title height-61 border-right ">售后服务评价</div>
        <dict-tag class="width-23 height-61" :type="'post_service_evaluate'" :value="detailData.dictServiceEvaluate" />
        <div class="bg-dark item-title height-61 border-right border-left">客户签名</div>
        <div class="width-23 height-61"></div>
        <div class="bg-dark item-title height-61 border-right border-left">日期</div>
        <div class="width-23 height-61"></div>
      </div>
      <div class="border-bottom bg-dark height-30">本次维修发生费用</div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-30 border-right">材料费</div>
        <div class="width-23 height-30">{{ detailData.materialsExpenses }}</div>
        <div class="bg-light item-title height-30 border-right border-left">人工费</div>
        <div class="width-23 height-30">{{ detailData.costOfLabor }}</div>
        <div class="bg-light item-title height-30 border-right border-left">车运费</div>
        <div class="width-23 height-30">{{ detailData.truckingExpense }}</div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-30 border-right">中餐伙食费</div>
        <div class="width-23 height-30">{{ detailData.nightBoardWages }}</div>
        <div class="bg-light item-title height-30 border-right border-left ">晚餐伙食费</div>
        <div class="width-23 height-30">{{ detailData.noonBoardWages }}</div>
        <div class="bg-light item-title height-30 border-right border-left ">加工费</div>
        <div class="width-23 height-30">{{ detailData.processCost }}</div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-30 border-right">住宿费</div>
        <div class="width-23 height-30">{{ detailData.quarterage }}</div>
        <div class="bg-light item-title height-30 border-right border-left">住宿补贴</div>
        <div class="width-23 height-30">{{ detailData.quarterageSubsidy }}</div>
        <div class="bg-light item-title height-30 border-right border-left">其他费用</div>
        <div class="width-23 height-30">{{ detailData.otherExpenses }}</div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-30 border-right">费用合计</div>
        <div class="width-90 height-30">{{ detailData.totalPrice }}</div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-30 border-right border-bottom">备注</div>
        <div class="width-90 height-30 border-bottom">{{ detailData.remarks }}</div>
      </div>
      <div class="d-flex border-bottom align-center bg-light">
        <div class="item-title">责任判定</div>
        <div class="d-flex flex-wrap border-left faults">
          <div 
            v-for="item, index in detailData.faults" 
            :key="index" 
            class="d-flex faults-item border-right border-bottom" 
          >
            <div class="width-20 border-right item-name">责任项目</div>
            <dict-tag class="width-40 border-right" :type="'dict_duty'" :value="item.dictDuty" />
            <div class="width-20 border-right item-name">责任占比</div>
            <div class="width-40">{{ item.dutyProportion }}</div>
          </div>
        </div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-dark item-title height-30 border-right">回访时间</div>
        <div class="width-40">{{ detailData.returnTime }}</div>
        <div class="bg-dark item-title height-30 border-right border-left">回访人</div>
        <div class="width-40">{{ detailData.returnContacts }}</div>
      </div>
      <div class="d-flex align-center">
        <div class="item-title bg-dark">回访结果</div>
        <div class="width-90 area border-left">{{ detailData.returnResult }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  defineProps({
    formType: {
      type: String,
      default: ''
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  })
</script>
<style lang="scss" scoped>
  .title {
    font-size: 34px;
    font-weight: bold;
    width: 200px;
    text-align: center;
    margin: 10px auto 0;
  }

  .logo {
    width: 200px;
    height: 50px;
    float: left;
  }

  .d-flex {
    display: flex;
  }

  .align-center {
    align-items: center;
  }

  .bg-dark {
    background-color: rgb(179 255 255 / 100%);
  }

  .bg-light {
    background-color: #e9fbfb;
  }

  .border-bottom {
    border-bottom: 1px solid #000;
  }

  .border-left {
    border-left: 1px solid #000;
  }

  .border-right {
    border-right: 1px solid #000;
  }

  .tab {
    width: 100%;
    border: 1px solid #000;
    text-align: center;

    .item-title {
      width: 10%;
    }

    .width-23 {
      width: 23.3%;
    }

    .width-20 {
      width: 20%;
    }

    .width-30 {
      width: 30%;
    }

    .width-33 {
      width: 33.3%;
    }

    .width-40 {
      width: 40%;
    }

    .width-60 {
      width: 60%;
    }

    .width-90 {
      width: 90%;
    }

    .height-30 {
      height: 30px;
      line-height: 30px;
    }

    .height-61 {
      height: 61px;
      line-height: 61px;
    }

    :deep(.el-textarea) {
      width: 90%;
      border-left: 1px solid #000;
    }

    :deep(.el-input__wrapper, .el-textarea__inner) {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    :deep(.el-textarea__inner) {
      box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
    }

    :deep(.justify-center) {
      justify-content: center;
    }
  }
</style>
